import React from "react";
import {  Toast } from 'antd-mobile'
import { List, AutoSizer,InfiniteLoader } from "react-virtualized";
import styles from './index.module.scss'
// 地图
import { getCurrentCity } from "../../utils/baiduMap";
// 内容列表
import HouseItem from '../../components/HouseLtem/index'
import NoHouse from '../../components/NoHouse/index'
// api
import { getHousesCondition, getHousesByParams } from "../../api";
export default class NewS extends React.Component {
  state = {
    cityName:'',
    cityArea:'',
    list: [],
    count:0
  };
  async componentDidMount() {
    // 获取当前定位城市
    const { label: cityName, value: cityArea } = await getCurrentCity();
    // 获取房屋查询条件
    await getHousesCondition(cityArea);
    // 更新状态
    this.setState({ cityName, cityArea });
    this.listFodata();

  }
  async listFodata() {
    // 用来获取房屋列表数据
    let res = await getHousesByParams({
      cityId: this.cityId,
      ...this.filters,
      start: 1,
      end: 20,
    });
    if (res.status === 200) {
      const { list, count } = res.data.body;
      if (count !== 0) {
        Toast.success(`获取到${count}条房源信息`,1)
      }
      this.setState({ list, count });
    }
  }
  // InfiniteLoader 开始
  isRowLoaded = ({ index }) => {
    const { list } = this.state;
    return !!list[index];
  }
  
  loadMoreRows = ({ startIndex, stopIndex }) =>{
    return getHousesByParams({
      cityId: this.cityId,
      ...this.filters,
      start: 1,
      end: 20,
    }).then(res => {
             // 刷新视图
      this.setState({
        list: [...this.state.list, ...res.data.body.list]
      }, () => console.log(this.state.list.length))
    })
  }
  // InfiniteLoader 结束
  // 渲染数据
  rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
    const { list } = this.state;
    const item = list[index]
    if (!item) {
      return (
        <div style={style} key={key}>
          <p className={styles.loading}></p>
        </div>
      )
}
    return <div key={key} style={style}>
      <HouseItem {...item}  />
    </div>
    // return (
    //   <div key={key} style={style}>
    //     {/* 
    //       index :  索引
    //        isScrolling ：当前项是否正在滚动
    //        isVisible： 当前项再Llist 中是可见的
    //        style： 样式属性
    //     */}
    //     --{list[index]}--
    //   </div>
    // );
  };
  // 渲染列表
  renderList(){
    const { count } = this.state
    if (count > 0) {
      return <InfiniteLoader
      // 列表项是否加载完成
        isRowLoaded={this.isRowLoaded}
        // 加载更多
        loadMoreRows={this.loadMoreRows}
        // 列表数据的总条数
        rowCount={count}
      >
        {({ onRowsRendered, registerChild }) => (
          <AutoSizer>
          {({ height, width }) => (
            <List
              onRowsRendered={onRowsRendered}
              ref={registerChild}
              className={styles.houseList}
              width={width}
              height={height}
              rowCount={count}
              rowHeight={120}
              rowRenderer={this.rowRenderer}
            />
          )}
        </AutoSizer>
          )}
        </InfiniteLoader>
    }
    return <NoHouse>暂无房源数据</NoHouse>
  }
  render() {
    //  rowHeight={120} // 每一行的高度
    //  autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
    //  width={width} // 视口的宽度
    //  height={height} // 视口的高度
    //  rowCount={count} // List列表项的行数
    //  rowHeight={120} // 每一行的高度
    //  rowRenderer={this.renderHouseList} // 渲染列表项中的每一行
    return (
      <div className={styles.roos}>
        <div className={styles.list}></div>
        <div  className={styles.tabs_out}>
          <div className={styles.tabs}>
          </div>
        </div>
        <div className={styles.autosize}>
          {this.renderList()}
        </div>
      </div>

    );
  }
}
